<template>
  <el-container style="background-color: #061727">
    <el-main style="background-color:#061727">
      <el-tabs v-model="activeName" type="card" style="height: 740px" @tab-click="handleClick">
        <!--        此处也可以直接进行表格描述，将TimeDA替换成vuechart就可以-->
        <el-tab-pane label="故障统计" name="first" style="margin-right: 10px">
          <Faultstatistic v-if="activeName==='first'" />
        </el-tab-pane>
        <el-tab-pane label="效果评价" name="second" style="margin-left: 10px">
          <Effecteva v-if="activeName==='second'" />
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>

<script>
import Faultstatistic from '@/views/dashboard/Faultstatistic'
import Effecteva from '@/views/dashboard/Effecteva'

export default {
  name: 'Maintenance',
  components: { Faultstatistic, Effecteva },
  data() {
    return {
      activeName: 'first',
      tabPosition: 'left'
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }

}
</script>

<style scoped>
::v-deep .el-tabs__item{
  margin-left: 5px;
  background-color:rgb(13,62,102);
  border: 0px ;
  color: #f0f0f0;
}
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav{
  border: none !important;
}
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item{
  border: none !important;
}
::v-deep .el-tabs--card>.el-tabs__header{
  border-bottom: 1px solid rgb(31,84,124);
}
::v-deep .el-tabs__item.is-active {
  margin-left: 5px;
  background-color: rgb(26, 172, 213);
  color: #f0f0f0;
}
</style>
